import PropTypes from 'prop-types'
import { Row, Col, Form, Input, DatePicker, Button, Select } from 'antd'
import moment from 'moment'

import ModalForm from './ModalForm'

const FormItem = Form.Item
const Option = Select.Option

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

// 头部(表单)
const SearchWrap = ({
  addOKFun, searchFun,
  form: {   // 被 Form.create()(SearchWrap) 包裹的组件会有antd提供的form属性
		getFieldDecorator, //用于和表单进行双向绑定
		getFieldsValue,    //获取一组输入控件的值，如不传入参数，则获取全部组件的值
  },
}) => {

  // 处理参数（主要格式化时间）
  const handleFields = (fields) => {
    const { userBirth } = fields
    if (userBirth) {
      fields['userBirth'] = moment(userBirth).format('YYYY-MM-DD')
    }
    return fields
  }

  // 新增提交
  const addOKHandler = (fields) => {
    fields = handleFields(fields)
    addOKFun(fields)   //该方法在index定义好了
  }
  // 搜索按钮
  const searchHandler = () => {
    let fields = getFieldsValue()
    fields = handleFields(fields)
    searchFun(fields)  //该方法在index定义好了
  }

  return (
    <div>
      <Form>
        <Row gutter={24}>
          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
            <FormItem label="用户名">
            	{getFieldDecorator('userName')(
                <Input placeholder="请输入用户名" />
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
          	<FormItem label="性别">
            	{getFieldDecorator('userSex')(
                <Select>
                  <Option value="0">全部</Option>
                    <Option value="1">男</Option>
                    <Option value="2">女</Option>
                </Select>
            	)}
          	</FormItem>
          </Col>
          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
            <FormItem label="年龄">
              {getFieldDecorator('userAge', {
                rules: [{
                  pattern: /^\+?[1-9][0-9]*$/, message: '请输入数值！', trigger: 'onBlur',
              	}],
              })(
                <Input placeholder="请输入年龄" />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
           <Col xl={{ span: 4 }} md={{ span: 8 }}>
            <FormItem label="请选择日期">
              {getFieldDecorator('userBirth')(
                <DatePicker format="YYYY-MM-DD" />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col xl={{ span: 4 }} md={{ span: 8 }}>
            {/* 在ModalForm组件中 可用this.props获得record属性和onOk方法 */}
            <ModalForm record={{}} onOk={addOKHandler}>
              <Button type="primary">新增</Button>
            </ModalForm>
          </Col>
          <Col xl={{ span: 4 }} md={{ span: 8 }}>
            <Button type="primary" onClick={searchHandler}>搜索</Button>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

// 通过PropTypes 获取父组件传来的属性（需引入PropTypes）
SearchWrap.propTypes = {
  addOKFun: PropTypes.func,
	searchFun: PropTypes.func,
}
/** 
 * antd中，用 Form.create()(组件) 包裹的组件会带有form属性
 * 该form属性中会有antd提供的方法和属性 比如获取表单中的值 表单校验 清空表单等等
 * 它提供的能力很多并不需要刻意去记，只需要根据我们的需求copy他的demo，修改即可
*/
export default Form.create()(SearchWrap)